<template>
  <el-row>
    <el-col :span="3">
      <el-timeline style="margin-top:6px">
        <el-timeline-item
          v-for="(activity, index) in activities"
          :key="index"
          :icon="activity.icon"
          :type="activity.type"
          :color="activity.color"
          :size="activity.size"
        >
          <span style="line-height:20px;">{{ activity.content }}</span>
        </el-timeline-item>
      </el-timeline>
    </el-col>
    <el-col :span="10">
      <template v-for="(activity, index) in activities">
        <div :key="index" class="item">
          <el-col :span="6">
            <el-select v-model="value" filterable placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
            </el-select>
          </el-col>
          <el-col :span="10">
            <el-input v-model="input" placeholder="请输入内容"/>
          </el-col>
        </div>
      </template>
    </el-col>
  </el-row>
</template>

<script type="text/ecmascript-6">
export default {
  name: 'ItemList',
  components: {

  },
  props: {
    activities: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: '',
      input: ''
    }
  },
  computed: {

  },
  watch: {

  },
  created() {

  },
  mounted() {

  },
  methods: {

  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.item{
  height:48px;
}
</style>
